<template>
  <el-dialog title="日程详情" :close-on-click-modal="false" append-to-body :visible.sync="visible" lock-scroll
    width="600px">
    <el-form ref="elForm" :model="dataForm" label-width="40px" label-position="right">
      <template v-if="!loading">
        <el-col :span="18">
          <el-form-item label-width="20px">
            <i class="el-icon-collection-tag"></i>
            <span class="titleSty">{{ dataForm.projectName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="5px">
            <el-button type="primary" icon="el-icon-edit" size="small" @click="examineTask"> 查看任务</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item v-if="listAcc">
            <div style="display: flex;align-items: center;">
              <div class="timeSty">
                <div class="font12">{{ listAcc.month }}月{{ listAcc.day }}日 {{ listAcc.dayOfWeek }}</div>
                <div class="font21 fontWB">09:00</div>
                <div class="font12 textBtn">开始时间</div>
              </div>
              <div class="xian"></div>

              <div class="timeSty">
                <div class="font12">{{ listAcc.month }}月{{ listAcc.day }}日 {{ listAcc.dayOfWeek }}</div>
                <div class="font21 fontWB">18:00</div>
                <div class="font12 textBtn">结束时间</div>
              </div>
            </div>
          </el-form-item>

        </el-col>
        <el-col :span="24">
          <el-form-item>
            <i class="el-icon-time"></i>
            <span class="allSpan font14">日程地点</span>
            <span class="font14">{{ dataForm.planEndTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <svg-icon icon-class="project-name" class="el-input__icon input-icon" />
            <span class="allSpan font14">日程描述</span>
            <span class="font14">{{ dataForm.projectName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <i class="el-icon-edit"></i>
            <span class="allSpan font14">日程描述</span>
            <div class="desSty">
              <div>
                <div>
                  月检: <span class="mr-15" style="color: red;">{{ dataForm.numberOfMonthlyInspectionTasks }}</span>
                  完成: <span style="color: greenyellow;">{{ dataForm.monthlyInspectionCompletedQuantity }}</span>
                </div>
                <div>
                  季检: <span class="mr-15">{{ dataForm.numberOfQuarterlyInspectionTasks }}</span>
                  完成: <span>{{ dataForm.quarterlyInspectionCompletedQuantity }}</span>
                </div>
              </div>
              <div style="margin: 0 5px;">
                <div>
                  半年检: <span class="mr-15">{{ dataForm.numberOfSemiAnnualInspectionTasks }}</span>
                  完成: <span>{{ dataForm.semiAnnualInspectionCompletedQuantity }}</span>
                </div>
                <div>
                  年检: <span class="mr-15">{{ dataForm.numberOfAnnualInspectionTasks }}</span>
                  完成: <span>{{ dataForm.annualInspectionCompletedQuantity }}</span>
                </div>
              </div>
              <div>
                <div>
                  两年检: <span class="mr-15">{{ dataForm.numberOfBienniallyInspectionTasks }}</span>
                  完成: <span>{{ dataForm.bienniallyInspectionCompletedQuantity }}</span>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item style="margin-bottom: 10px;">
            <svg-icon icon-class="participant" class="el-input__icon input-icon" />
            <span class="allSpan font14">参与人员</span>
            <div class="avaSty">
              <div class="listAva" v-for="item in dataForm.users" :key="item.userId">
                <el-avatar icon="el-icon-user-solid" :src="getUrl(item.userAvatar)"></el-avatar>
                <div style="height: 1rem;">{{ item.userNickName }}</div>

              </div>

            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <i class="el-icon-edit"></i>
            <span class="allSpan font14">附件</span>
            <el-card shadow="always" v-for="(itemEx, index) in dataForm.annexes" :key="index"
              style="margin-bottom: 1rem;">
              <div class="allCardSty">
                <div class="heaCardSty">
                  <svg-icon icon-class="layout" class="el-input__icon input-icon" />
                  {{ itemEx.fileName }}
                </div>
                <div>{{ itemEx.updateTime }}</div>
                <div class="nameCardSty">
                  <el-avatar icon="el-icon-user-solid" size="small" class="mr-1"
                    :src="getUrl(itemEx.userAvatar)"></el-avatar>
                  {{ itemEx.name }}
                </div>
                <div class="lastCardSty">
                  <el-button type="text" @click="downloadList(itemEx)"><svg-icon icon-class="download-blur"
                      class="el-input__icon input-icon" />下载</el-button>
                  <!-- <el-button type="text" style="color: red;"><svg-icon icon-class="delete"
                      class="el-input__icon input-icon" />删除</el-button> -->
                </div>
              </div>
            </el-card>
          </el-form-item>
        </el-col>
      </template>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false"> 取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getProjectPlanInfoSubPlanId } from "@/api/plan-produce/task";
export default {
  props: [],
  data() {
    return {
      visible: false,
      detailVisible: false,
      loading: false,

      dataForm: {
        cycleNo: 1
      },
      listAcc: {
        month: '',
        day: '',
        dayOfWeek: ''
      }
    };
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  methods: {
    init(id, time) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true;
          this.listAcc = this.parseDate(time)
          getProjectPlanInfoSubPlanId(id).then((res) => {
            this.dataForm = res.data
            this.loading = false;
          });
        }
      });
    },
    getUrl(url) {
      return process.env.VUE_APP_WEBSC_API + url
    },
    parseDate(dateString) {
      const date = new Date(dateString);
      const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份补零  
      const day = date.getDate().toString().padStart(2, '0'); // 日期补零  
      const dayOfWeek = date.toLocaleString('default', { weekday: 'long' });
      return { month, day, dayOfWeek };
    },
    // 下载
    downloadList(row) {
      this.$download.resource(row.filePath, row.fileName);
    },
    examineTask() {
      this.$emit('refreshDetail', this.dataForm)
    }
  },
};
</script>
<style lang="scss" scoped>
.titleSty {
  font-size: 16px;
  font-weight: bold;
}

.timeSty {
  color: rgb(90, 156, 248);
  text-align: center;

}

.xian {
  width: 1rem;
  height: 0.3rem;
  background: rgb(90, 156, 248);
  margin: 0 2rem;
}

.textBtn {
  background: #999;
  color: #666;
  border-radius: 1rem;
  margin-top: 0.5rem;
  line-height: 24px;
}

.el-icon-collection-tag {
  font-size: 16px;
}

.allSpan {
  margin: 0 10px 0 5px;
  color: #999;
}

.desSty {
  display: flex;
  margin-left: 20px;
  justify-content: space-between;
  width: 80%;
}

.allCardSty {
  display: flex;
  align-items: center;

  .heaCardSty {
    padding: 10px 20px 10px 10px;
  }

  .nameCardSty {
    display: flex;
    align-items: center;
    padding: 10px 30px;

  }

  .lastCardSty {
    display: flex;
    align-items: center;
    // color: ;
  }
}

.avaSty {
  margin-left: 20px;

  display: flex;

  .listAva {
    width: 5rem;
    height: 5rem;
    margin-right: 0.7rem;
    text-align: center;
    line-height: 1rem;

  }
}

.mr-15 {
  margin-right: 15px;
}

.mr-1 {
  margin-right: 10px;
}


.font12 {
  font-size: 12px;
}

.font14 {
  font-size: 14px;
}

.font16 {
  font-size: 16px;
}

.font21 {
  font-size: 28px;
}


.fontWB {
  font-weight: bold;
}

.input-icon {
  height: 14px;
  width: 14px;
}
</style>
